<template>
  <view class="flex-col page">
    <view class="flex-col self-stretch">
      <MyHeader title="我的地址"></MyHeader>
      <view class="flex-col list">
        <view v-if="items.length" class="flex-row justify-between items-center list-item" v-for="(item, index) in items"
          :key="index">
          <view class="flex-row items-center">
            <image class="shrink-0 image_8"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=9aeca210385c8a02564fc5c10d663582.png" />
            <text class="font ml-5">珠山区金鼎美食广场</text>
          </view>
          <image class="image_7"
            src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=c8e5c4934fb549a016ee9d9603275c1d.png" />
        </view>
        <view v-else class="flex-col items-center self-stretch group_2">
          <image class="image_my"
            src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=e970346ece17f494f3cfa531b4c4bb8f.png" />
          <text class="text_my mt-17">暂无地址</text>
        </view>
      </view>
    </view>
    <navigator url="/subpkg/myother/address/add/add"
      class="flex-col justify-start items-center self-center text-wrapper">
      <text class="font text">添加地址</text>
    </navigator>
    <view class="self-stretch section_4"></view>
  </view>
</template>

<script setup>
  const items = []
  // const items = [null,null]
</script>

<style scoped>
  .ml-11 {
    margin-left: 22rpx;
  }

  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .group_2 {
    margin-top: 344rpx;

  }

  .page {
    background-color: #f7f8fa;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  .section {
    padding: 36rpx 12rpx 42rpx 32rpx;
    background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
  }

  .group {
    padding: 0 16rpx;
  }

  .image {
    width: 34rpx;
    height: 22rpx;
  }

  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }

  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }

  .image_4 {
    width: 18rpx;
    height: 34rpx;
  }

  .section_2 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    height: 64rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }

  .image-wrapper {
    width: 38rpx;
  }

  .image_6 {
    width: 38rpx;
    height: 14rpx;
  }

  .section_3 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }

  .image_5 {
    width: 34rpx;
    height: 34rpx;
  }

  .list {
    padding: 0 32rpx;
  }

  .list-item {
    padding: 14rpx 16rpx 32rpx;
    border-bottom: solid 1rpx #e5e5e5;
  }

  .image_8 {
    width: 46rpx;
    height: 46rpx;
  }

  .font {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 30.04rpx;
    color: #333333;
  }

  .image_7 {
    margin-right: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }

  .image_my {
    width: 110rpx;
    height: 118rpx;
  }

  .text-wrapper {
    margin-top: 860rpx;
    padding: 28rpx 0;
    background-color: #4c8eef;
    border-radius: 56rpx;
    width: 578rpx;
  }

  .text {
    color: #ffffff;
    line-height: 29.72rpx;
  }

  .text_my {
    color: #999999;
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.84rpx;
  }

  .section_4 {
    margin-top: 96rpx;
    background-color: #ffffff;
    height: 68rpx;
  }
</style>